<template>
	<page-container :tabShow='true'>

		<view slot='header' class="headerBox">

			<diy-search type='discover' :value="searchItem" :fixed='false' @discoverSearch='discoverSearch'>
			</diy-search>

			<!-- <view class="search-center">
                <input type="text" class="center-input" maxlength="50" placeholder="搜一搜，有好物" @confirm="search()" disabled="true" @click="search()" />

                <image v-if="isApp" src="/static/images/live_play.png" mode="aspectFit" style="width:49px;height:38px;margin-left: 24rpx;"></image>
            </view> -->

			<!-- <view class="tabs">
                <view v-for="(item, inx) in headerArr" :key="inx" :class="{tabs_item:true,tabs_active:inx == headerInx}" @click="headerBtn(inx)">
                    {{ item.name }}
                    <view v-if="inx == headerInx" class="active_line"></view>
                </view>
            </view> -->

		</view>

		<view slot='center' class="discover-box df-col">
			<view style="height: 100%;">
				<view class="discover-conten">
					<swiper :indicator-dots="false" :disable-touch='true' :current="headerInx" @change="swiperCall"
						style="height: 100%;">
						<swiper-item>
							<block>
								<reco-mmend v-if="isResetMemberInfo"></reco-mmend>

							</block>
						</swiper-item>
						<!--   <swiper-item>
                            <block>
                                <reco-mmend></reco-mmend>
                            </block>
                        </swiper-item>
                        <swiper-item>
                            <block>
                                <near-by></near-by>
                            </block>
                        </swiper-item> -->
					</swiper>

				</view>
			</view>
		</view>
	</page-container>
</template>

<script>
	import recoMmend from './components/recommend.vue' // 推荐
	import diySearch from '@/components/diy-search/diy-search.vue'
	export default {
		data() {
			return {
				headerArr: [
					// {
					// 	name: '关注'
					// },
					{
						name: '推荐'
					}
					// {
					// 	name: '附近'
					// }
				],
				headerInx: 0,
				menuHeight: 0,
				menuWidth: 0,
				contenPadding: '0px',
				searchItem: {
					title: '搜一搜，有好物'
				},
				isResetMemberInfo:false
			}
		},
		onLoad() {
			let idx = this.$util && this.$util.queryObj().inx
			if (idx) {
				this.headerInx = Number(idx)
			}

		},
		onShow() {
			this.isResetMemberInfo = false;
			this.$nextTick(() => {
				this.isResetMemberInfo = true;
			})
		},
		computed: {
			contenPad() {
				return this.contenPadding
			}
		},
		components: {
			recoMmend,
			diySearch
		},
		methods: {
			headerBtn(inx) {
				console.log(inx)
				this.headerInx = inx
			},
			swiperCall(e) {
				this.headerInx = e.detail.current
			},
			discoverSearch() {
				this.$util.redirectTo('/livePages/searchindex/searchindex', {
					contents: 'getContentSearchList'
				})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				let {
					title,
					image,
					id,
					type
				} = res.target.dataset
				// 来自页面内分享按钮
				console.log(title, image, id, type)
				let path = ''
				if (type == 'video') {
					path = '/livePages/video/video?video_id=' + id
				}
				if (type == 'graphic') {
					path = '/publicPages/details/details?content_id=' + id
				}
				return {
					title,
					path,
					imageUrl: image
				}
			}
			return {
				// title: this.videoObj.title,
				// path: '/pages/index/index',
				// imageUrl: this.videoObj.image
			}

		},
		onShareTimeline(res) {
			let {
				title,
				image,
				id,
				type
			} = res.target.dataset
			// 来自页面内分享按钮
			console.log(title, image, id, type)
			let path = ''
			if (type == 'video') {
				path = '/livePages/video/video?video_id=' + id
			}
			if (type == 'graphic') {
				path = '/publicPages/details/details?content_id=' + id
			}
			return {
				title,
				path,
				imageUrl: image
			}
		}
	}
</script>

<style lang="scss">
	.headerBox {
		position: sticky;
		top: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 99;
	}

	.discover-box {
		height: 100%;
		background: linear-gradient(180deg, #ffffff, #eeeeee);
		/* #ifdef H5 */
		padding-top: 20rpx !important;

		/* #endif */
		.discover-conten {
			// height: calc(100% – 70px);
			height: 100%;
		}
	}

	/* #ifdef H5 */
	.header-tab {
		padding: 20rpx 0;
	}

	/* #endif */
	.header-son {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin: 0 30rpx;
		line-height: 1;
	}

	.header-son-ativer {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.heng-xian {
		height: 6rpx;
		width: 36rpx;
		margin: 12rpx auto 0;
		border-radius: 10rpx;
	}

	.tabs {
		height: 98rpx;
		display: flex;
		align-items: center;
		margin-left: 42rpx;

		&_item {
			color: #000000;
			font-size: 36rpx;
			font-weight: 500;
			font-family: PingFang SC;
			margin-right: 40rpx;
			text-align: center;
		}

		&_active {
			font-weight: bold;
			position: relative;

			.active_line {
				width: 36rpx;
				height: 6rpx;
				background-color: #ffd332;
				border-radius: 3rpx;
				position: absolute;
				bottom: 0;
				transform: translateX(50%);
			}
		}
	}
</style>
